<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统-服务</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">

    <style>
        .info-box-instance:hover {
            box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !important;
        }

        .info-box-instance {
            cursor: pointer;
            margin: 0;
            box-shadow: none !important;
        }
    </style>
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="input-group pull-left" style="width: 50%">
        <input id="keyword" class="form-control" type="search" placeholder="关键字">
        <div class="input-group-append">
            <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
        </div>
    </div>
</div>
<!--数据展示-->
<div id="container" class="container-fluid">
    <div id="{{id}}" class="card card-outline {{class}}">
        <div class="card-header">
            <h3 class="card-title" style="margin-top: 4px">
                {{name}}
                <span class="text-success ml-2">
                    <i class="fa fa-check"></i>
                    在线 {{upCount}}
                </span>
                <span class="text-danger ml-2">
                    <i class="fa fa-bug"></i>
                    离线 {{downCount}}
                </span>
            </h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fa fa-plus"></i></button>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="info-box info-box-instance"
                         data-service-name="{{serviceName}}"
                         data-service-description="{{serviceDescription}}"
                         data-instance-id="{{id}}"
                         data-instance-ip-port="{{ip}}:{{port}}">
                        <span class="info-box-icon {{class}}" style="padding: 0 15px;">
                            <i class="fa {{icon}}"></i>
                        </span>
                        <div class="info-box-content">
                            <span class="info-box-text">{{ip}}:{{port}}</span>
                            <span class="info-box-number">已运行{{upTimeDuration}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../adminLTE/js/adminlte.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    function ServiceControl() {
        this.serviceTemplate = "";
        this.instanceTemplate = "";
        this.init = function () {
            this.instanceTemplate = $("#container > .card > .card-body > .row").html();
            $("#container > .card > .card-body > .row").html("");
            this.serviceTemplate = $("#container").html();
            $("#container").html("");
        };
        this.load = function () {
            var self = this;
            $.ajax({
                url: Url.serviceList,
                type: HttpMethod.get,
                success: function (result, status, xhr) {
                    for (var i = 0; i < result.length; i++) {
                        service = result[i];
                        service.class = "";
                        if (service.upCount === 0) {
                            service.class = "card-danger";
                        } else if (service.downCount === 0) {
                            service.class = "card-success";
                        } else {
                            service.class = "card-warning";
                        }

                        service.description = service.name
                        service.icon = "fa-server"
                        for (var j = 0; j < Services.length; j++) {
                            if (Services[j].key === service.name) {
                                service.description = Services[j].value;
                                service.icon = Services[j].icon;
                                break;
                            }
                        }

                        var serviceHtml = self.serviceTemplate
                            .replace(new RegExp("{{id}}", "gm"), service.name)
                            .replace(new RegExp("{{name}}", "gm"), service.description)
                            .replace(new RegExp("{{class}}", "gm"), service.class)
                            .replace(new RegExp("{{upCount}}", "gm"), service.upCount)
                            .replace(new RegExp("{{downCount}}", "gm"), service.downCount);

                        $("#container").append(serviceHtml);

                        for (var j = 0; j < service.instances.length; j++) {
                            var instance = service.instances[j];
                            instance.class = "";
                            if (instance.status === "DOWN") {
                                instance.class = "bg-danger";
                            } else if (instance.status === "UP") {
                                instance.class = "bg-success";
                            } else {
                                instance.class = "bg-warning";
                            }
                            instance.port = 0;
                            if (instance.httpPort && instance.httpPort > 0) {
                                instance.port = instance.httpPort;
                            } else if (instance.httpsPort && instance.httpsPort > 0) {
                                instance.port = instance.httpsPort;
                            }
                            var instanceHtml = self.instanceTemplate
                                .replace(new RegExp("{{serviceName}}", "gm"), service.name)
                                .replace(new RegExp("{{serviceDescription}}", "gm"), service.description)
                                .replace(new RegExp("{{id}}", "gm"), instance.instanceId)
                                .replace(new RegExp("{{uuid}}", "gm"), instance.instanceId)
                                .replace(new RegExp("{{class}}", "gm"), instance.class)
                                .replace(new RegExp("{{icon}}", "gm"), service.icon)
                                .replace(new RegExp("{{ip}}", "gm"), instance.ipAddr)
                                .replace(new RegExp("{{port}}", "gm"), instance.port)
                                .replace(new RegExp("{{upTimeDuration}}", "gm"), instance.upTimeDuration);

                            $("#container #" + service.name + " > .card-body > .row").append(instanceHtml);
                        }
                    }
                }
            });
        };
        this.bind = function () {
            var self = this;
            $("#container").on("click", ".info-box-instance", function (){
                var id = $(this).attr("data-instance-id");
                var address = $(this).attr("data-instance-ip-port");
                var serviceName = $(this).attr("data-service-name");
                var serviceDescription = $(this).attr("data-service-description");
                var url = "cloud/html/instance.html?service=" + encodeURIComponent(serviceName) + "&instance=" + encodeURIComponent(id);
                var uuid = Math.random().toString(36).slice(-8);

                parent.window.frameCtrl.windowCtrl.open(uuid, serviceDescription + "-" + address, url);
            });
        };
    }

    var serviceControl = new ServiceControl();
    serviceControl.init();
    serviceControl.load();
    serviceControl.bind()
</script>

</body>
</html>